<template>
  <x-dialog :title="title" :show.sync="visible" v-if="visible" :before-close="handleClose" width="60%">
    <x-filter @search="handleSearch" @reset="resetSearch" :isPage="false" :spanSearch="16">
      <el-col :span="8" class="x-filter-item flex-column search-form-item">
        <label class="x-filter-item-label">
          {{ $t('financialSynergy.invoice.billNumber') }}
        </label>
        <el-input v-model="searchParams.number" :placeholder="'请输入'" clearable maxlength="50"></el-input>
      </el-col>
    </x-filter>
    <x-table
      ref="tableCom"
      :pagination="pagination"
      :data-source="tableData"
      :loading="loading"
      :height="300"
      :row-key="'id'"
      @on-change="handleTableChange"
      @on-selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" />
      <!-- <el-table-column :label="$t('common.serialNumber')" :width="55" fixed type="index" /> -->
      <el-table-column
        v-for="(item, index) in tableColumns"
        :key="index"
        :prop="item.prop"
        :fixed="item.fixed"
        :show-overflow-tooltip="true"
        :width="item.width"
        :min-width="item.minWidth || '-'"
        :label="item.label"
        :sortable="'custom'"
      >
        <template #default="scope">
          <span v-if="item.prop === 'beginDate'">
            {{ replaceDateTime(scope.row[item.prop]) }}
          </span>
          <span v-else-if="item.prop === 'endDate'">
            {{ replaceDateTime(scope.row[item.prop]) }}
          </span>
          <span v-else>
            {{ scope.row[item.prop] }}
          </span>
        </template>
      </el-table-column>
    </x-table>
    <span slot="footer">
      <el-button @click="handleClose"> {{ $t('common.cancel') }} </el-button>
      <el-button type="primary" @click="handleSubmit()">
        {{ $t('common.confirm') }}
      </el-button>
    </span>
  </x-dialog>
</template>
<script>
  import { TableListMixin, throttle, replaceDateTime } from '@package/utils'
  import { billsColumns as columns, billsActions as actions } from '../config/invoiceNotice.js'
  import { billsListUrl as listUrl } from '../api/invoiceNotice.js'

  export default {
    name: 'SourceBillsDialog',
    mixins: [TableListMixin],
    props: {
      otherParam: {
        type: Object,
        default: () => ({})
      }
    },
    data() {
      return {
        title: '来源对账单',
        visible: false,
        listUrl,
        columns,
        actions,
        loading: false,
        searchParams: {
          number: ''
        },
        disableMixinCreated: true
        // otherParam: {
        //   // 需要加个屏蔽已关联的对账单字段

        // }
      }
    },
    watch: {
      otherParam: {
        handler(val) {
          this.loadData()
        },
        deep: true
      }
    },
    methods: {
      handleOpen() {
        this.visible = true
        this.loadData()
      },
      handleSubmit: throttle(function () {
        this.visible = false
        this.$emit('on-submit', this.selectionRows)
      }),
      handleClose() {
        this.$refs.tableCom.clearSelection()
        this.visible = false
      }
    }
  }
</script>
<style lang="scss" scoped>
  ::v-deep.x-data-view {
    border-width: 0;
    box-shadow: none;
  }
  .x-filter-item-label {
    line-height: 30px;
    margin-right: 16px;
    white-space: nowrap;
    color: #424242;
  }
</style>
